<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background: #0d1320;
      overflow: hidden;
      margin: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    #date {
      text-align: center;
      font-size: 25vh;
      font-weight: bold;
      line-height: 40vh;
      color: #e2ecfd;
    }

    #timer {
      text-align: center;
      font-size: 52vh;
      font-weight: bold;
      line-height: 56vh;
      color: #e2ecfd;
    }

    #timer span{
      font-size: 30vh;
      vertical-align: 13%
    }
  </style>
</head>

<body>
  <div id="date">00月00日</div>
  <div id="timer">06:12</div>

  <script>
    let showSymbl = true
    function clock() {
      let now = new Date()
      let hour = now.getHours() + ''
      let minute = now.getMinutes() + ''
      let month = (now.getMonth() + 1) + ''
      let day = now.getDate() + ''
      if (showSymbl) {
        document.getElementById('timer').innerHTML = `${hour.padStart(2, '0')}<span>:</span>${minute.padStart(2, '0')}`

      } else {
        document.getElementById('timer').innerHTML = `${hour.padStart(2, '0')}<span style="color:#0d1320">:</span>${minute.padStart(2, '0')}`
      }
      document.getElementById('date').innerHTML = `${month.padStart(2, '0')}月${day.padStart(2, '0')}日`

      showSymbl = !showSymbl
    }
    clock()
    setInterval(() => {
      clock()
    }, 1000)
  </script>
</body>

</html>